.box1 {
    .box2 {
        color: red;
    }
    >.box3 {
        color: red;

        &:hover {
            color: blue;
        }
    }

    //为box1设置一个hover
    //&就表示外层的父元素 
    &:hover {
        color: orange;
    }

    div & {
        color: blue;
    }
}

.p1 {
    width: 100px;
    height: 200px;
}

//extend继承已经存在的属性
//:extend()对当前选择器扩展指定选择器的样式(选择器分组)
.p2:extend(.box1 > .box3) {
    color: red;
}


.p3 {
    //直接对指定的样式进行引用,这里就相当于将p1的样式在这里进行了复制
    //mixin混合
    .p1();
}

//使用类选择器时可以在选择器后面添加一个括号,这时我们实际上就创建了一个mixins
.p4() {
    width: 100px;
    height: 100px;
    background-color: #bfa;
}

.p5 {
    .p4();
}


//混合函数 在混合函数中可以直接设置变量
.test(@w, @b) {
    width: @w;
    height: @b;
    border: 1px solid red;
}
 
div {
    //调用混合函数,按顺序传递
    .test(200px, 100px); 
    .test(@b:200px, @w:300px);
}






